<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="index.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        canvas {
            margin: 50px auto 0;
            display: block;
            background: yellow;
        }
    </style>
</head>
<body>
<canvas id="canvas" width="400" height="400">
    此浏览器不支持canvas
</canvas>
</body>
</html>
<script>
    const ctx = document.getElementById('canvas')
    const gl = ctx.getContext('webgl')

    const VERTEX_SHADER_SORUCE = `
    void main(){
      gl_Position = vec4(0.0,0.0,0.0,1.0);
      gl_PointSize = 100.0;
    }
  `;
    // gl_PointCoord  vec2
    const FRAGEMNT_SHADER_SOURCE = `
    void main(){
      if(gl_PointCoord.y>0.75){
         gl_FragColor = vec4(1.0,0.0,0.0,1.0);
        }else if(gl_PointCoord.y>0.5){
         gl_FragColor = vec4(0.0,1.0,0.0,1.0);
        }else if(gl_PointCoord.y>0.25){
         gl_FragColor = vec4(0.0,0.0,1.0,1.0);
        }else{
         gl_FragColor = vec4(0.0,1.0,1.0,1.0);
        }
    }
  `;
    // 封装后
    const program = initShader(gl, VERTEX_SHADER_SORUCE, FRAGEMNT_SHADER_SOURCE)

    gl.drawArrays(gl.POINTS, 0, 1);

</script>
